<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>SMT产线状态看板</title>
		<link rel="stylesheet" type="text/css" href="../../css/clientScreen_new.css"/>
		<style type="text/css">
			.deviceTab{
				color: white;
				text-align: center;
				vertical-align: middle;
				margin: 20px auto;
				width: 100%;
				height: 100%;
			}
			
			.deviceTab img{
				width: 170px;
			}
			
			.productProcess{
    			background: rgb(18, 150, 219);
    			letter-spacing: 1px;
    			color: white;
    			font-size: 18px;
    			font-weight: bold;
    			padding: 5px 0px;
    			border-radius: 3px;
    			width: 100%;
    			
			}
			
			.deviceArea{
				float: left;
				width: 15%;
				margin: 10px;
				border: solid 1px rgb(18, 150, 219);
				height: 90%;
			}
			
			.deviceArea table{
				color: white;
				text-align: center;
				vertical-align: middle;
				margin: 5px auto 10px;
				width: 100%;
				height: 90%;
			}
			
			.deviceArea table th{
				height: 40px;
			}
			
			.deviceOK{
				background-color: green;
			}
			
			.deviceNG{
				background-color: red;
			}
			
			.echartsArea{
				width: 100%;
				height: 100%;
			/*	border: solid 1px rgb(18, 150, 219);*/
				overflow: hidden;
			}
			
			.echartsDiv{
				float: left;
				width: 48%;
				height: 270px;
				margin-left: 25px;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<!-- 标题 -->
			<div class="top">
				<div class="title clear">
					<img src="../../img/screen/bgd_title.png"/>
					<p>SMT产线状态看板</p>
				</div>
				<div class="currentTime">
					<span>2018年6月23日</span>&emsp;<span>星期四</span>&emsp;<span>09:54:32</span>
				</div>
			</div>
			<!-- 数据 -->
			<div class="content1">
				<table class="deviceTab">
					<thead>
						<tr>
							<th>上板机</th>
							<th>打码机</th>
							<th>印刷机</th>
							
							<th>SPI</th>
							<th>贴片机</th>
							<th>回流炉</th>
							<th>AOI</th>
							<th>收板机</th>
							
						</tr>
					</thead>
					<tbody>
						<tr>
							<td><img src="../../img/device/device.png"></td>
							<td><img src="../../img/device/device.png"></td>
							<td><img src="../../img/device/device.png"></td>
							<td><img src="../../img/device/device.png"></td>
							
							<td><img src="../../img/device/device.png"></td>
							
							<td><img src="../../img/device/device.png"></td>
							<td><img src="../../img/device/device.png"></td>
							<td><img src="../../img/device/device.png"></td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="content2">
				<div class="productProcess"> &nbsp;&nbsp; 当前承制计划：JH20200220001 / 702XD  &nbsp;&nbsp;生产进度：200 / 800 </div>
			</div>
			<!-- 列表 -->
			<div class="content3">
				<div class="deviceArea">
					<table>
						<thead>
							<tr>
								<th>打码机</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td class="deviceOK">设备状态：<span>正常</span></td>
							</tr>
							<tr>
								<td>程序名称：<span>CX093</span></td>
							</tr>
							<tr>
								<td>PCB编号：<span>CX0898</span></td>
							</tr>
							<tr>
								<td>生产进度：<span>200/800</span></td>
							</tr>
						</tbody>
					</table>
					
				</div>
				<div class="deviceArea">
					<table>
						<thead>
							<tr>
								<th>印刷机</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td class="deviceNG">设备状态：<span>异常</span></td>
							</tr>
							<tr>
								<td>程序名称：<span>CX093</span></td>
							</tr>
							<tr>
								<td>PCB编号：<span>CX0898</span></td>
							</tr>
							<tr>
								<td>生产进度：<span>200/800</span></td>
							</tr>
						</tbody>
					</table>
					
				</div>
				<div class="deviceArea">
					<table>
						<thead>
							<tr>
								<th>SPI</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td class="deviceOK">设备状态：<span>正常</span></td>
							</tr>
							<tr>
								<td>程序名称：<span>CX093</span></td>
							</tr>
							<tr>
								<td>PCB编号：<span>CX0898</span></td>
							</tr>
							<tr>
								<td>生产进度：<span>200/800</span></td>
							</tr>
						</tbody>
					</table>
					
				</div>
				<div class="deviceArea">
					<table>
						<thead>
							<tr>
								<th>贴片机</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td class="deviceOK">设备状态：<span>正常</span></td>
							</tr>
							<tr>
								<td>程序名称：<span>CX093</span></td>
							</tr>
							<tr>
								<td>PCB编号：<span>CX0898</span></td>
							</tr>
							<tr>
								<td>生产进度：<span>200/800</span></td>
							</tr>
						</tbody>
					</table>
					
				</div>
				<div class="deviceArea">
					<table>
						<thead>
							<tr>
								<th>回流炉</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td class="deviceOK">设备状态：<span>正常</span></td>
							</tr>
							<tr>
								<td>程序名称：<span>CX093</span></td>
							</tr>
							<tr>
								<td>PCB编号：<span>CX0898</span></td>
							</tr>
							<tr>
								<td>生产进度：<span>200/800</span></td>
							</tr>
						</tbody>
					</table>
					
				</div>
				<div class="deviceArea">
					<table>
						<thead>
							<tr>
								<th>AOI</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td class="deviceOK">设备状态：<span>正常</span></td>
							</tr>
							<tr>
								<td>程序名称：<span>CX093</span></td>
							</tr>
							<tr>
								<td class="deviceNG">PCB编号：<span>CX0898</span></td>
							</tr>
							<tr>
								<td>生产进度：<span>200/800</span></td>
							</tr>
						</tbody>
					</table>
					
				</div>
				
			</div>
			<!-- 图表 -->
			<div class="content4">
				<div class="echartsArea">
					<span class="con_title">OEE分析</span>
					<div>
						<div class="echartsDiv" id="printData"></div>
						<div class="echartsDiv" id="pasteData"></div>
						
					</div>
				</div>
				
			</div>
		</div>
	</body>
	<script src="../../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/frame/common.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var w = document.documentElement.clientWidth;
		var h = document.documentElement.clientHeight;
		$(".wrap").css("width", w);
		$(".wrap").css("height", w*9/16);
		
		// 告警提示框
		var tag = true;
		window.setInterval(function(){
			if(tag){
				$(".warning").css("display", "none");
			 	tag = false;
			}else{
			 	$(".warning").css("display", "block");
			 	tag = true;
			}
		},5000);
		
		//印刷机分析展示
		function showPrintData(){
			var myChart = echarts.init(document.getElementById('printData'));
			var printOption = {
				title : {
			        text: '印刷机',
			        textStyle:{
			        	color: '#ffffff',
			        	fontSize: 18
			        },
			        top:20,
			        left:300,
			    },
			    tooltip : {
			        trigger: 'axis'
			    },
			    legend: {
			        data:['时间开动率','性能开动率','合格率','OEE'],
			        textStyle:{
			        	color: '#ffffff'
			        },
			        bottom:0
			        
			    },
			    toolbox: {
			        show : false,
			        feature : {
			            mark : {show: true},
			            dataView : {show: true, readOnly: false},
			            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
			            restore : {show: true},
			            saveAsImage : {show: true}
			        }
			    },
			    calculable : true,
			    xAxis : [
			        {
			            type : 'category',
			            boundaryGap : false,
//			            name : '计划号',
			            data : ['01','02','03','04','05','06','07','08','09','10','11','12',
			            '13','14','15','16','17','18','19','20','21','22','23','24','25','26',
			            '27','28','29','30'],
			            splitLine: {
							show: true,
							lineStyle: {
								color: '#646464'
							}
						},
						axisLine:{
							lineStyle: {
								color: '#ffffff'
							}
						}
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value',
			            name : '%',
			            splitLine: {
							show: true,
							lineStyle: {
								color: '#646464'
							}
						},
						axisLine:{
							lineStyle: {
								color: '#ffffff'
							}
						}
			        }
			    ],
			    series : [
			        {
			            name:'时间开动率',
			            type:'line',
			            data:[10, 18, 28, 28, 38, 52, 54, 55,52, 54, 55,52, 54, 55,52, 54, 55,
			            52, 54, 55,52, 54, 55,52, 54, 55,52, 54, 55,52]
			        },
			        {
			            name:'性能开动率',
			            type:'line',
			            data:[90, 90, 90, 90, 90, 90, 90, 90, 90, 90,90, 90, 90, 90, 90,
			            90, 90, 90, 90, 90,90, 90, 90, 90, 90,90, 90, 90, 90, 90,]
			        },
			        {
			            name:'合格率',
			            type:'line',
			            data:[50, 60, 70, 80, 90, 80, 70, 80, 90, 80, 70, 80, 90, 80, 70, 80,
			            90, 80, 70, 80, 90, 80, 70, 80, 90, 80, 70, 80, 90, 80]
			        },
			        {
			            name:'OEE',
			            type:'line',
			            data:[20, 30, 50, 70, 30, 20, 70, 70,85, 70, 70,85, 70, 70,85, 70, 70,85,
			            70, 70,85, 70, 70,85, 70, 70,85, 70, 70,85]
			        }
			    
			    ],
			  color: ['#44a1f8', '#dd5252', '#9932CC', '#FFD700']
			};
			myChart.setOption(printOption);
			window.onresize = myChart.resize;
		}
		showPrintData();
		
		
		//印刷机分析展示
		function showPasteData(){
			var myChart = echarts.init(document.getElementById('pasteData'));
			var pasteOption = {
				title : {
			        text: '贴片机',
			        textStyle:{
			        	color: '#ffffff',
			        	fontSize: 18
			        },
			        top:20,
			        left:300,
			    },
			    tooltip : {
			        trigger: 'axis'
			    },
			    legend: {
			        data:['时间开动率','性能开动率','合格率','OEE'],
			        textStyle:{
			        	color: '#ffffff'
			        },
			        bottom:0
			        
			    },
			    toolbox: {
			        show : false,
			        feature : {
			            mark : {show: true},
			            dataView : {show: true, readOnly: false},
			            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
			            restore : {show: true},
			            saveAsImage : {show: true}
			        }
			    },
			    calculable : true,
			    xAxis : [
			        {
			            type : 'category',
			            boundaryGap : false,
//			            name : '计划号',
			            data : ['01','02','03','04','05','06','07','08','09','10','11','12',
			            '13','14','15','16','17','18','19','20','21','22','23','24','25','26',
			            '27','28','29','30'],
			            splitLine: {
							show: true,
							lineStyle: {
								color: '#646464'
							}
						},
						axisLine:{
							lineStyle: {
								color: '#ffffff'
							}
						}
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value',
			            name : '%',
			            splitLine: {
							show: true,
							lineStyle: {
								color: '#646464'
							}
						},
						axisLine:{
							lineStyle: {
								color: '#ffffff'
							}
						}
			        }
			    ],
			    series : [
			        {
			            name:'时间开动率',
			            type:'line',
			            data:[10, 18, 28, 28, 38, 52, 54, 55,52, 54, 55,52, 54, 55,52, 54, 55,
			            52, 54, 55,52, 54, 55,52, 54, 55,52, 54, 55,52]
			        },
			        {
			            name:'性能开动率',
			            type:'line',
			            data:[90, 90, 90, 90, 90, 90, 90, 90, 90, 90,90, 90, 90, 90, 90,
			            90, 90, 90, 90, 90,90, 90, 90, 90, 90,90, 90, 90, 90, 90,]
			        },
			        {
			            name:'合格率',
			            type:'line',
			            data:[50, 60, 70, 80, 90, 80, 70, 80, 90, 80, 70, 80, 90, 80, 70, 80,
			            90, 80, 70, 80, 90, 80, 70, 80, 90, 80, 70, 80, 90, 80]
			        },
			        {
			            name:'OEE',
			            type:'line',
			            data:[20, 30, 50, 70, 30, 20, 70, 70,85, 70, 70,85, 70, 70,85, 70, 70,85,
			            70, 70,85, 70, 70,85, 70, 70,85, 70, 70,85]
			        }
			    ],
			  color: ['#44a1f8', '#dd5252', '#9932CC', '#FFD700']
			};
			myChart.setOption(pasteOption);
			window.onresize = myChart.resize;
		}
		showPasteData();
		
		
	</script>
</html>
